<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>WebSocket Client</title>

    <script type="text/javascript" language="javascript">
        var websocket;
        var wsUri = "ws://localhost:8888/magic4j/ws?clientId=gacl";
        function init()
        {
            output = document.getElementById("output");
            writeToScreen("Connecting to : "+ wsUri);
            websocket = new WebSocket(wsUri);
            websocket.onopen = function(evt) {
                writeToScreen("Connect Success!");
            };
            websocket.onmessage = function(evt) {
                writeToScreen("Received Message: "+ evt.data);
            };
            websocket.onerror = function (evt) {
                console.log(evt)
                writeToScreen('<span style="color:red;">ERROR:</span>'+evt.data);
            };
        }

        function send() {
            doSend(document.getElementById("textID").value);
        }

        function doSend(message) {
            websocket.send(message);
            writeToScreen("Send Message : "+message);
        }

        function writeToScreen(message) {
            var pre = document.createElement("p");
            pre.style.wordWrap = "break-word";
            pre.innerHTML = message;
            output.appendChild(pre)
        }
        window.addEventListener("load", init, false);
    </script>
</head>
<body>
<h1>WebSocket Client</h1>

<div style="text-align:left;">
    <form action="">
        <input onclick="send()" value="Send Message" type="button">
        <input id="textID" name="message" value="Hello Web Socket" type="text">
        <br>
    </form>

</div>
<div id="output"></div>
</body>
</html>
